/*  Code By Webdevtrick ( https://webdevtrick.com )  */
/*@import url(https://fonts.googleapis.com/css?family=Lato);*/
/*body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #222;
}*/
.mySlides {display:none;}
body {
  font-family: Arial, Helvetica, sans-serif;
}
.content {
  padding: 16px;
  padding-top: 90px;
  padding-bottom: 90px;
}
.nag_grafika  {
  float: left;
}
.nag_tekst  {
	padding:8px 16px;
  *float: right;
}
/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /*transform: translateZ(-1px) scale(2);
  z-index: -1;*/
}
/* First image (Logo. Full height) */
.bgimg-1 {
  background-image: url('/zdjecia/connect.jpg');
  min-height: 100%;
}
/* 2 image (projects) */
.bgimg-2 {
  background-image: url('/zdjecia/hammer-4.jpg');
  min-height: 100%;
}
/* 3 image (contact) */
.bgimg-3 {
  background-image: url('/zdjecia/judgment.jpg');
  min-height: 100%;
}
h4{
	font-size: 50px;
}
.w3-display-middle{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%)
	}
header{
	height: 600px;
	text-align: center;
}
.obraz2{
	height: 600px;
	text-align: center;
	position:relative;
	color:#0000ff!important;
	/*font-size: 24px;*/
}
.stopka{
	background-color: black;
	color: white;
	text-align: center;
	padding: 5px;
}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
/*.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}*/
.w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
.w3-animate-top{position:fixed;width:100%;z-index:1;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
/*.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;}*/
.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-right{float:right!important}
.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}

* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 322px;
  /*width: 45.33%;*/
  /*padding: 50px;*/
  /*background-color:#ccc;*/
}
.box1 {
  float: left;
  width: 110px;
  /*padding: 50px;*/
  /*background-color:#bbb;*/
}
.box2 {
  float: right;
  width: 300px;
  /*padding-top: 25px;*/
  /*background-color:#ddd;*/
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

ul {
  display: flex;
  /*flex-direction: column;*/
  align-items: start;
  list-style-type: none;
}
ul li {
  padding: 6px 0;
}
ul li a {
  position: relative;
  display: block;
  text-decoration: none;
  /*font-family: "Lato";*/
  /*font-size: 2rem;;*/
  color: #ecf0f1;
  /*text-transform: uppercase;*/
  padding: 4px 0;
  transition: 0.5s;
}
ul li a::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 3px;
  top: 100%;
  left: 0;
  background: #0000ff;
  /*#ff7000;*/
  transition: transform 0.5s;
  transform: scaleX(0);
  transform-origin: right;
}
ul li a:hover {
  color: #95a5a6;
}
ul li a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
@media only screen and (max-width: 748px) {
	.box2 {
  float: left;
  /*width: 300px;*/
  /*padding-top: 25px;*/
  /*background-color:#ddd;*/
	}
.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}

.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
}
ul li {
  padding: 0px;
}

/*Telefon*/
@media only screen and (max-width: 448px) {
	.box {
  float: left;
  width: 100%;
  text-align: center;
  /*width: 300px;*/
  /*padding-top: 25px;*/
  /*background-color:#ccc;*/
	}
	.box1 {
  /*background-color:#bbb;*/
  	position:relative;
	/*top:50%;*/
	left:35%;
	/*transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%)*/
	}
	.box2 {
  /*float: left;*/
  width: 90%;
  /*text-align: center;*
  /*width: 300px;*/
  /*padding-top: 25px;*/
  /*background-color:#ccc;*/
	}
	.bgimg-1 {
		height: 450px;
	}
	.bgimg-2, .bgimg-3 {
		height: 200px;
	}
}
